import { useState } from 'react'
import { Form, Input, Button, Select, message, Alert } from 'antd'
import { useRouter } from 'next/navigation'

const RegistrationForm = () => {
  const [form] = Form.useForm()
  const [registerType, setRegisterType] = useState<'email' | 'phone'>('email')
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

  const validateMessages = {
    required: '{name} is required!',
    email: '{name} must be a valid email address!',
    phone: '{name} must be a valid phone number!',
    password: '{name} must be at least 8 characters!',
  }

  const handleSubmit = async (values: any) => {
    setIsLoading(true)
    try {
      // 这里应该替换为实际的API调用
      const mockResponse = await new Promise(resolve => {
        setTimeout(() => {
          resolve({ success: true, message: 'Registration successful!' })
        }, 1500)
      })

      if (mockResponse.success) {
        message.success(mockResponse.message)
        router.push('/login')
      }
    } catch (error) {
      message.error('Registration failed, please try again!')
    } finally {
      setIsLoading(false)
      form.resetFields()
    }
  }

  return (
    <div className='min-h-screen bg-gray-50 flex items-center justify-center p-4'>
      <Form
        form={form}
        name='registration'
        layout='vertical'
        onFinish={handleSubmit}
        validateMessages={validateMessages}
        className='w-full max-w-md'>
        <h1 className='text-3xl font-bold text-center mb-8'>Create Account</h1>

        <Form.Item
          name='registerType'
          value={registerType}
          onChange={e => setRegisterType(e.target.value as 'email' | 'phone')}
          className='mb-4'>
          <Select placeholder='Select registration type'>
            <Select.Option value='email'>Email</Select.Option>
            <Select.Option value='phone'>Phone Number</Select.Option>
          </Select>
        </Form.Item>

        {registerType === 'email' ? (
          <>
            <Form.Item
              name='email'
              label='Email Address'
              rules={[{ required: true }, { type: 'email', message: 'Please input a valid email address!' }]}>
              <Input
                email
                placeholder='example@domain.com'
              />
            </Form.Item>

            <Form.Item
              name='password'
              label='Password'
              rules={[
                { required: true, message: 'Please input your password!' },
                { min: 8, message: 'Password must be at least 8 characters!' },
              ]}>
              <Input.Password placeholder='Minimum 8 characters' />
            </Form.Item>
          </>
        ) : (
          <>
            <Form.Item
              name='phone'
              label='Phone Number'
              rules={[
                { required: true },
                {
                  type: 'number',
                  pattern: /^1[3-9]\d{9}$/,
                  message: 'Please input a valid Chinese phone number!',
                },
              ]}>
              <Input
                type='tel'
                placeholder='+86 13800138000'
                addonBefore='+86'
                pattern='[1-9]\d{9}'
              />
            </Form.Item>

            <Form.Item
              name='password'
              label='Password'
              rules={[
                { required: true, message: 'Please input your password!' },
                { min: 8, message: 'Password must be at least 8 characters!' },
              ]}>
              <Input.Password placeholder='Minimum 8 characters' />
            </Form.Item>
          </>
        )}

        <Form.Item className='mt-4'>
          <Button
            type='primary'
            htmlType='submit'
            loading={isLoading}
            className='w-full'>
            {isLoading ? 'Registering...' : 'Sign Up'}
          </Button>
        </Form.Item>

        <Alert
          message='Already have an account?'
          type='info'
          className='mt-4 text-center'>
          <Button
            onClick={() => router.push('/login')}
            type='link'>
            Log in here
          </Button>
        </Alert>
      </Form>
    </div>
  )
}

export default RegistrationForm
